<template>
  <div id="happyCake">
    <div class="login">
      <div class="changeTip"><span>今日您还有 {{residue}}次 抽奖机会</span></div>
      <img src="../../../assets/images/happyCake.png" alt="">
      <img class="img1" :class="{animation1:animation}" src="../../../assets/images/dice1.png" alt="">
      <img class="img2 " :class="{animation2:animation}" src="../../../assets/images/dice2.png" alt="">
      <img class="img3 " :class="{animation3:animation}" src="../../../assets/images/dice3.png" alt="">
      <img class="img4 " :class="{animation4:animation}" src="../../../assets/images/dice4.png" alt="">
      <img class="img5 " :class="{animation5:animation}" src="../../../assets/images/dice5.png" alt="">
      <img class="img6 " :class="{animation6:animation}" src="../../../assets/images/dice6.png" alt="">
      <img class="img7 " :class="{animation7:animation}" src="../../../assets/images/dice7.png" alt="">
    </div>
    <div class="btn"><input type="button" value="开始" @click="happyCakeStart"></div>
    <van-popup v-model="popupShow">
      <div class="popup">
        <div class="popup1">{{successData.desc}}</div>
        <div class="popup2">{{successData.score}}</div>
        <div class="popupClose" @click="close"><img src="../../../assets/images/popupClose.png" alt=""></div>
          <div class="popupMain" >
            <img :src="imgForm[item]" alt="" v-for="(item,index) in successData.number" :key="index">

          </div>
          <p class="popupTip">{{successData.awards}}</p>
          <div class="popupBtn" @click="popupBtn"><img src="../../../assets/images/happypopupBtn.png" alt=""></div>

      </div>
    </van-popup>
    <div class="tip">
      <p>规则说明</p>
      <p v-html="rule"></p>
    </div>
    <div class="table">
      <table class="tab1" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="2">奖项</th>
        </tr>
        <tr>
          <td rowspan="13" width="34%">状元</td>
          <td>状元插金花</td>
        </tr>
        <tr>
          <td width= "66%">六红</td>
        </tr>
        <tr>
          <td width= "66%">遍地锦</td>
        </tr>
        <tr>
          <td rowspan="4" width= "66%">六黑</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>

        <tr>
          <td width= "66%">五红</td>
        </tr>
        <tr>
          <td rowspan="5" width= "66%">五子登科</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
          <td width= "34%"></td>
          <td width= "66%">四红</td>
        </tr>
        <tr>
          <td colspan="2">榜眼（对堂）</td>
        </tr>
        <tr>
          <td colspan="2">探花（三红）</td>
        </tr>
        <tr>
          <td colspan="2" rowspan="5">进士（四进）</td>
        </tr><tr>
        </tr><tr>
        </tr><tr>
        </tr><tr>
        </tr><tr>
          <td colspan="2">举人（二举）</td>
        </tr>
        <tr>
          <td colspan="2">秀才（一秀）</td>
        </tr>
      </table>
      <table class="tab2" cellpadding="0" cellspacing="0">
        <tr>
          <th>特征</th>
        </tr>
        <tr v-for="(items,index) in tab2" :key="index">
          <td>
            <img :src="imgForm[item]" alt="" v-for="(item,index) in items" :key="index">
          </td>
        </tr>
      </table>
      <table class="tab3" cellpadding="0" cellspacing="0" >
        <tr>
          <th>奖励工分</th>
        </tr>
        <tr v-for="(item,index) in tab3" :key="index">
          <td :rowspan="item.zqspan"  v-if="!item.zqdis">{{item.zq}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/8 0008 16:04.
     */
    import utils from '../../../lib/StringExtend'
    export default {
        mounted() {
          if(utils.isNone(utils.getCookie('wechat_id_'+this.wechatId)) || utils.isNone(utils.getCookie('open_id_'+this.wechatId))) {
            this.getWechat();
          }
          if(!utils.isNone(this.code)&&!utils.isNone(this.appid)) {
            this.userInfo();
          }else {
            this.loadData();
          }
        },
        components: {},
        props: {},
        data() {
            return {
              imgForm:[
                require('../../../assets/images/zero.png'),require('../../../assets/images/one.png'),require('../../../assets/images/two.png'),
                require('../../../assets/images/three.png'),require('../../../assets/images/four.png'),require('../../../assets/images/five.png'),
                require('../../../assets/images/six.png')],
              tab2:[
                [4,4,4,4,1,1],[4,4,4,4,4,4],[1,1,1,1,1,1],[6,6,6,6,6,6],[5,5,5,5,5,5],[3,3,3,3,3,3],[2,2,2,2,2,2],[4,4,4,4,4,0],
                [6,6,6,6,6,0],[5,5,5,5,5,0],[3,3,3,3,3,0],[2,2,2,2,2,0],[1,1,1,1,1,0],[4,4,4,4,0,0],[1,2,3,4,5,6],[4,4,4,0,0,0],
                [6,6,6,6,0,0],[5,5,5,5,0,0],[3,3,3,3,0,0],[2,2,2,2,0,0],[1,1,1,1,0,0],[4,4,0,0,0,0],[4,0,0,0,0,0]
              ],
              tab3:[{zq:0},{zq:0},{zq:0},{zq:0},{zq:90},{zq:90},
                {zq:70},{zq:70},{zq:70},{zq:70},{zq:70},{zq:60},{zq:50},{zq:40},{zq:30},
                {zq:30},{zq:30},{zq:30},
                {zq:30},{zq:20},{zq:10},{zq:0},{zq:0}],
              animation:false,
              popupShow:false,
              successData:{
                number:[6,1,5,4,5,3],
                desc:"恭喜您",
                score:"抽中10工分",
                awards:"一秀"
              },
              rule:'',
              residue:'0',//次数

              appid: utils.GetQueryString('appid'),
              code: utils.GetQueryString('code'),
              wechatId:utils.getCookie('wechat_id'),
              wechat_id:this.$route.query.wechat_id,//公众号
            }
        },
        computed: {},
        methods: {
          //微信授权
          getWechat(){
            if(utils.isNone(this.wechat_id)){
              return;
            }
            let params = {
              redirect_url: window.location.href,
              wechat_id: this.wechat_id
            };
            utils.setCookie('wechat_id', this.$route.query.wechat_id);
            utils.setCookie('wechat_id_'+this.wechat_id, this.wechat_id);
            this.$axios.wechatWechatOauth(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              let url = res.data.url;
              window.location.href = url;
            })
          },
          //获取用户信息
          userInfo(){
            let params = {
              appid: this.appid,
              code: this.code,
            };
            this.$axios.wechatGetWechatUser(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              utils.setCookie('open_id_'+this.wechatId, res.data[0].open_id);
              this.loadData();
            })
          },
          loadData(){
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.moonBattleAwardInfo(params).then(res=>{
                if(res.errcode !== '000'){
                  this.$toast(res.errmsg)
                }
                this.residue = res.data.residue;
                res.data.data_arr.forEach((item,index)=>{
                  this.tab3[index].zq = item;
                });
                var reg = new RegExp(" ","g");
                this.rule = res.data.rule.replace(reg,'<br>');
            })
          },
          //开始博饼
          happyCakeStart(){
            if(this.animation){
              return
            }
            if(this.residue == '0'){
              this.$toast('今日次数已用完，请明日再来哦～');
              return
            }
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.moonBattleClickBegin(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.residue = res.data.residue;
              this.successData = res.data;
              this.start();
            });
          },
          start(){
            this.animation = true;
            setTimeout(()=>{
              this.animation = false;
              this.popupShow = true;
            },5000)
          },
          uploadData:function (list) {
            var k = 0;
            let field ="zq";
            while (k < list.length) {
              list[k][field + 'span'] = 1;
              list[k][field + 'dis'] = false;
              for (var i = k + 1; i <= list.length - 1; i++) {
                if (list[k][field] == list[i][field] && list[k][field] != ''&&list[k]['yd']==list[i]['yd']&&list[k]['yd']!='') {
                  list[k][field + 'span']++;
                  list[k][field + 'dis'] = false;
                  list[i][field + 'span'] = 1;
                  list[i][field + 'dis'] = true;
                } else {
                  break;
                }
              }
              k = i;
            }
            return list;
          },
          popupBtn(){
            this.popupShow = false;
          },
          close(){
            this.popupShow = false;
          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  #happyCake{
    height: 100%;
    overflow: auto;
    background: url("../../../assets/images/happyCakeBg.png") repeat;
    background-size: 100% 100%;
    text-align: center;
    .login{
      width: 5.4rem;
      height: 3.4rem;
      margin: 1.5rem auto 0.28rem auto;
      /*margin: 0.7rem auto 0.28rem auto;*/
      position: relative;
      .changeTip{
        width: 100%;
        padding-top: 2.2rem;
        text-align: center;
        box-sizing: border-box;
        position: absolute;
        top: -3.2rem;
        span{
          color: #ffffff;
          border: solid 1px #ffffff;
          font-size: 0.25rem;
          border-radius: 0.17rem;
          height: 0.34rem;
          line-height: 0.34rem;
          padding: 0.02rem 0.1rem;
        }
      }
      img{
        width: 5.4rem;
        height: 2.8rem;
        position: absolute;
        top: 0.6rem;
        left: -0.3rem;
      }
      .img1{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0;
        left: 2.6rem;
      }
      .img2{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.44rem;
        left: 4rem;
      }
      .img3{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.7rem;
        left: 2.2rem;
      }
      .img4{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.7rem;
        left: 3rem;
      }
      .img5{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.14rem;
        left: 3.4rem;
      }
      .img6{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 1rem;
        left: 3.6rem;
      }
      .img7{
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 1rem;
        left: 2.6rem;
      }
    }
    .btn{

      input[type='button']{
        background: #ffd32b;
        border-radius: 0.1rem;
        width: 1.8rem;
        height: 0.66rem;
        border: 0;
        margin-bottom: 0.5rem;
        font-size: 0.3rem;
        color: #6b552c;
      }
    }
    .van-popup{
      border-radius: 0.1rem;
    }
    .popup{
      width: 5.37rem;
      height: 4.61rem;
      position: relative;
      overflow: hidden;
      background: url("../../../assets/images/happypopupBg.png") no-repeat;
      background-size: 100% 100%;
      .popupMain{
        position: absolute;
        top: 1.66rem;
        left: 50%;
        width: 2.8rem;
        margin-left: -1.4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        img{
          width: 0.4rem;
          height: 0.4rem;
        }

      }
      .popupClose{
        position: absolute;
        top: 0;
        right: 0;
        width: 0.55rem;
        height: 0.55rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .popup1{
        position: absolute;
        top: 0.64rem;
        text-align: center;
        width: 100%;
        color: #fcb49b;
        font-size: 0.3rem;
      }
      .popup2{
        position: absolute;
        top: 1.06rem;
        text-align: center;
        width: 100%;
        color: #fde7a9;
        font-size: 0.3rem;
      }
      .popupTip{
        position: absolute;
        top: 2.2rem;
        text-align: center;
        width: 100%;
        color: #fcb49b;
        font-size: 0.3rem;
      }
      .popupBtn{
        width: 3.7rem;
        position: absolute;
        bottom: 0.2rem;
        left: 50%;
        margin-left: -1.85rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .tip{
      font-family: AdobeHeitiStd-Regular;
      font-size: 0.24rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 2px;
      color: #ffd32b;
      text-align: left  ;
      padding: 0 0.4rem;
      box-sizing: border-box;
      p{
        text-align: left;
        line-height: 0.4rem;
      }
      p:first-child{
        font-size: 0.28rem;
        line-height: 0.6rem;
      }
    }
    .table{
      width: 6.72rem;
      height: 14rem;
      margin: 0.36rem auto;
      display: flex;
      flex-direction: row;
      color: #2c2c28;
      font-weight: 700;
      box-sizing: border-box;
      font-size: 0.24rem;
      .tab1,.tab2{
        width: 2.56rem;
        height:100%;
        background: #fff295;
        color: #2c2c28;
        td{
          border-bottom: solid 1px #9e7816;
          border-right: solid 1px #9e7816;
          img{
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.05rem;
          }
        }
      }
      .tab3{
        width: 1.56rem;
        height:100%;
        color: #2c2c28;
        background: #fff295;
        td{
          border-bottom: solid 1px #9e7816;
          border-right: solid 1px #9e7816;
        }
      }
      th{
        border-top: solid 1px #9e7816;
        border-bottom: solid 1px #9e7816;
        border-right: solid 1px #9e7816;
        color: #e93737;
        font-weight: 700;
      }
      tr,th{
        height: 0.3rem!important;
        line-height: 0.28rem;
      }
    }



    @-webkit-keyframes bal3 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
      }
    }
    @keyframes bal3 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
      }
    }
    @-webkit-keyframes bal4 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
      }
    }
    @keyframes bal4 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
      }
    }
    .animation{
      -webkit-animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation1 {
      -webkit-animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation2 {
      -webkit-animation: bal3 470ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 470ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation3 {
      -webkit-animation: bal3 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation4 {
      -webkit-animation: bal4 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal4 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation5 {
      -webkit-animation: bal3 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation6 {
      -webkit-animation: bal3 530ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 530ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
    .animation7 {
      -webkit-animation: bal4 570ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal4 570ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
  }

</style>
